<template>
<!-- 全屏播放器 -->
<div class="normal-player-container">
    <!-- 背景 -->
   <div class="background">
       <img :src="currentSong.al.picUrl" width="100%" height="100%">
   </div>
   <!-- 蒙层 -->
   <div class="background layer">
   </div>
   <div class="top">
       <h1 class="title">
           {{currentSong.name}}
       </h1>
       <h2 class="subtitle">{{currentSong.ar}}</h2>
   </div>
   <!-- 歌词区 -->
   <div class="lyric" ref="musicLyric">
      <ul>
        <li
        v-for="(p, index) in lyricList"
        :key="index"
        :class="{ active: lyricIdx === index }">
          {{p.text}}
        </li>
      </ul>
   </div>
</div>

</template>

<script>
import { getLyric } from '@/api'
import { parseLyric } from '@/util/tool'
export default {
    name:"lyric",
    props:{
      currentTime:Number,
    },
    data() {
         return {
            currentSong:{"id":1807537867,"name":"四季予你","ar":"程响",
            "al":{"name":"四季予你",
            "picUrl":"https://p2.music.126.net/k5r1GC-erKK4WcDmzyrsIw==/109951165648878421.jpg"}},
            play:true,
            lyricList:[],
            lyricIdx:-1,
            // progress:0
        }
    },
    watch:{
        // 使用watch监听当前歌曲进度value的变化处理歌词位置
        currentTime:function() {
            let i = 0
            // 循环歌词对象
            for (let { time } of this.lyricList) {
            // time表示歌词对象中的时间，如果time等于歌曲进度progress，改变当前歌词进度		lyricIndex
                if (Math.abs(time - this.currentTime) < 0.8) {
                  // console.log(this.currentTime)
                    this.lyricIdx = i;
                    console.log(this.lyricIdx)
                    // 当歌词进度大于5，即播放到了第5句歌词，开始滚动
                    if (i > 5) {
                        this.$refs.musicLyric.scrollTop = 51 * (i - 5);
                    }
                }
                i++;
            }
        }

    },
    async mounted(){
      const res = await getLyric(1807537867)
      console.log(parseLyric(res.lrc.lyric))
      this.lyricList = parseLyric(res.lrc.lyric)


    },
    created(){
      // for(let x = 0, i = 0; x<240; x += 15, i++){
      //   setTimeout(() => {
      //     this.progress = i
      //     // console.log(x)
      //   },x*100)
      // }
    }
}
</script>

<style scoped>
@keyframes rotate{
    0%{
        transform: rotate(0);

    }
    100%{
        transform: rotate(360deg);
    }

}
.normal-player-container{
    position: fixed;
    left: 60%;
    top: 56px;
    right: 0;
    z-index: 1000;
    background: #eee;
    height: 78vh;
}
.background{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    opacity: 0.6;
    /* 模糊程度 */
    filter: blur(20px);
}
.layer{
    background: #aaa;
    opacity: 0.3;
    /* filter: none; */
}
.top{
    position: relative;
    margin-bottom: 25px;
}
.back{
    position: absolute;
    top: 0;
    left: 6px;
}

/* 设置标题 */
.title{
    width: 70%;
    margin:0 auto;
    line-height: 40px;
    text-align:center;
    font-size: 16px;
    color: #333;
}
/* 设置专辑名字 */
.subtitle{
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}
/* 设置中间的部分 */
.middle{
    position: absolute;
    margin: auto;
    top: 10%;
    left: 0;
    right: 0;
    width: 80%;
    height: 80vw;
    box-sizing: border-box;
}
.middle .CD-wrapper{
    width:100%;
    height: 100%;
}
.middle .CD-wrapper img{
    position: absolute;
    top:4%;
    left: 40%;
    width: 18%;
    height: 15%;
    border-radius: 50%;
    animation:rotate 20s linear infinite;
}
/* 暂停键 */
.middle .CD-wrapper .pause{
    animation-play-state: paused;
}
/* 设置底部按钮 */
.bottom{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
}
.operators{
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.operators i{
    font-weight: bold;
    flex:1;
    color: #2e3030;
    font-size: 30px;
}
.lyric{
  height: 520px;
  overflow: auto;
  text-align: center;
  color: rgba(212, 207, 207, 0.897);
  line-height: 45px;
}
.lyric::-webkit-scrollbar{
  width: 3px;
  height: 1px;
}
.lyric::-webkit-scrollbar-thumb{
  background-color: #eee;
}
/* .lyric::-webkit-scrollbar-track{
  background-color: #fff;
} */
.active{
  height: 30px;
  margin-top: -8px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 400;
  color:skyblue;
}
</style>
